<template>
  <div
    ref="selGrp"
    class="sl-select xl:min-w-52 max-w-lg"
    :class="{ 'sl-select-loading': $attrs.loading, 'sl-select-focused': isFocused }"
    :style="containerWidth ? { width: containerWidth + 'px' } : {}"
  >
    <div class="label" @click="doFocus"> {{ label }}： </div>
    <component
      :is="getComponent()"
      v-if="selectType"
      ref="selComponent"
      v-bind="$attrs"
      :value-format="t('common.dateTimeFormatStr')"
      @focus="focus"
      @blur="blur"
    />
    <a-tree-select
      v-else-if="isTreeSelect"
      ref="selComponent"
      show-search
      :bordered="false"
      :get-popup-container="getPopupContainer"
      v-bind="$attrs"
    >
      <slot />
    </a-tree-select>
    <a-select v-else ref="selComponent" :bordered="false" :get-popup-container="getPopupContainer" v-bind="$attrs">
      <slot />
    </a-select>
    <div
      v-if="$attrs.loading"
      class="label-select-loading absolute top-0 bottom-0 text-color-secondary flex items-center justify-center"
    >
      {{ t("common.loading") }}
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref } from "vue";
import { Select, TreeSelect, DatePicker } from "ant-design-vue";
import { useI18n } from "/@/locales/useI18n";
import { LabelSelectType } from "/@/types/components";
import type { SelectCompInstance } from "/@/types/antd";

export default defineComponent({
  components: {
    ASelect: Select,
    ATreeSelect: TreeSelect,
    DatePicker,
  },
  inheritAttrs: false,
  props: {
    label: String,
    //为true则是treeSelect，其它值且selectType没值，则是普通select
    isTreeSelect: Boolean,
    //自定义组件类型 具体支持类型查看LabelSelectType定义
    selectType: String as PropType<LabelSelectType>,
    containerWidth: Number,
  },
  setup(props) {
    const selGrp = ref<any>();
    const { t } = useI18n();
    function getPopupContainer() {
      return selGrp.value;
    }
    function getComponent() {
      switch (props.selectType) {
        case LabelSelectType.datePicker:
          return DatePicker;
        case LabelSelectType.rangePicker:
          return DatePicker.RangePicker;
      }
      return null;
    }
    function focus() {
      isFocused.value = true;
    }
    function blur() {
      isFocused.value = false;
    }
    const selComponent = ref<SelectCompInstance>();
    function doFocus() {
      if (selComponent.value) {
        selComponent.value.focus();
      }
    }
    const isFocused = ref(false);
    return {
      getPopupContainer,
      selGrp,
      t,
      getComponent,
      focus,
      blur,
      doFocus,
      selComponent,
      isFocused,
    };
  },
});
</script>

<style lang="less">
.sl-select {
  position: relative;
  overflow: visible;
  background-color: #fff;
  border: 1px solid @border-color-1;
  border-radius: 4px;
  padding-left: 11px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 136px;
  transition: border 0.3s, box-shadow 0.3s;
  .label {
    display: inline-block;
    color: @color-secondary;
    white-space: nowrap;
  }
  .ant-select-selector {
    padding-left: 3px !important;
  }
  .ant-select-dropdown {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }
  //:not(.ant-tree-select-dropdown)
  // .ant-tree-select-dropdown {
  //   left: 0 !important;
  // }
  .ant-picker {
    border: 0;
    box-shadow: none;
    transition: none;
  }
  .ant-select {
    overflow: hidden;
  }
  .ant-select-selector {
    height: @sl-height-base - 2 !important;
    border: 0 !important;
  }

  .ant-select-sm {
    .ant-select-selector {
      height: @sl-height-sm - 2 !important;
    }
  }
  .ant-select-selection-search {
    left: 0 !important;
  }

  // .ant-select-sm .ant-select-selector {
  //   height: @sl-height-sm - 2 !important;
  //   .ant-select-selection-item {
  //     line-height: @sl-height-sm - 2 - 2 !important;
  //   }
  // }
}
.sl-select-focused {
  box-shadow: 0 0 0 2px #1890ff33;
  border-color: @active-color-1;
}
.sl-select:hover {
  border-color: @active-color-1;
}
.sl-select-loading {
  .ant-select-selector {
    visibility: hidden;
  }
}
.label-select-loading {
  right: 28px;
}
</style>
